<%@ page contentType="text/html;charset=UTF-8"%>
<%@ page isELIgnored="false" %> <!-- 不加则pageContext.request.contextPath被当做字符串处理，可在web.xml中设置 -->
<!DOCTYPE html>
<%@ include file="/WEB-INF/view-system/include/taglib.jsp"%>
<html>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="<%=contextPath %>/static-system/css/login.css">
<head>
<title>登录</title>
<body>
	<div id="loginBox">
		<div id="login-heading">
			<p class="lead" style="letter-spacing:0.1em;">SSM聚合+多数据源</p>
		</div>
	    <div id="loginDiv2"></div>
	    <div id="loginDiv" class="board panel ">
			<div class="col-xs-12 col-sm-12  col-md-12">
				<form id="loginForm" class="form-horizontal"  action="" method="POST">
				  	<div class="form-group" style="padding-top: 35px;">
					    <label for="j_username" class="col-sm-3" >用户名:</label>
					    <div class="col-md-8  col-sm-8">
					      <input name="j_username" class="form-control" id="j_username" type="text" >
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="j_password" class="col-sm-3">密&nbsp;&nbsp;&nbsp;码:</label>
					    <div class="col-md-8  col-sm-8">
					      <input name="j_password" id="j_password" class="form-control" type="password" >
					    </div>
					  </div>
					  <div class="form-group">
						<label for="j_random" class="col-sm-3">验证码:</label>
						<div class="col-md-4  col-sm-4">
						  <input name="j_random" id="j_random" class="form-control" type="text" >
						 </div>
						    <img class="col-md-3 col-sm-4" style='cursor:pointer;' onclick='changeImg(this)' border=0 src='${ctx}/randomImage' title='点击切换验证码'>
					  </div>
					  <div class="form-group" style="padding: 1em 0 2em 0;">
					    <div class="col-sm-offset-1 col-sm-10">
							<button type="submit" id="loginBtn" class="btn btn-block">登录</button>
					    </div>
					  </div>
				</form>
			</div>
		</div>
	</div>
</body>
<script  type="text/javascript">
function changeImg(img){
	img.src = "${ctx}/randomImage?" + Math.random() * 10000; 
}
window.onresize=function(){  
	changeLoginDiv2();  
};
function changeLoginDiv2(){
	var dw=$("#loginDiv").width();
	var dh=$("#loginDiv").height();
	$("#loginDiv2").width(dw);
	$("#loginDiv2").height(dh);
}
$(function(){
	//Logger.hide();
	//漂浮错误信息
	var error="${error}";
	var isErr = error=='';
	console.log(error);
	//Logger.debug('login.jsp look error info =>' + isErr);
	if (error != null && error != undefined && error != '') { 
		if("${error}" != ""){
			new $.zui.Messager("${error}", {
				type: 'danger' ,// 定义颜色主题
				close: true,//定义禁用关闭按钮
				 icon: 'bell' ,// 定义消息图标
			   // time: 0 // 不进行自动隐藏
			}).show();
			
			// 对不同的错误类型做不同的处理
			if ("${errorType}" != "") {
				var errorType = "${errorType}";
				if (errorType == "accountError") {
					// 账号或密码错误
					$("input[name='j_password']").val(''); // 密码置空
					$("input[name='j_password']").focus(); // 聚焦
				} else if ( errorType == "randomCodeError") {
					// 验证码错误
					$("input[name='j_radom']").val(''); // 验证码置空
					$("input[name='j_radom']").focus(); // 聚焦
				}
			}
			
		}
	}
	//加载表单验证插件
	$("#loginForm").validate({ 
		      //表单对应验证属性
              rules: {  
                  j_username: {  
                      required: true,  
                  },  
                  j_password: {  
                      required: true,  
                  },
                  j_random: {  
                      required: true,  
                  },
              },  
      		errorClass:"has-error error-content col-md-12 col-sm-12",
      		//验证不通过，element：对应验证节点，error：错误信息节点的提示信息
      		errorPlacement: function(error, element) { 
      			 element.closest('div.form-group').addClass("has-error");
      			 element.closest('div.form-group').append(error);
      			 changeLoginDiv2();
      		},
      	    //验证通过，label：信息节点的提示信息
      		success:function(label) {
      			//label.removeClass("has-error col-md-12 text-center");
      		    label.closest('div.form-group').removeClass("has-error");
      		  	label.remove();
      		}, 
      	    //表单提交
      		submitHandler:function(form){
      			form.submit();
      		}
      });
	// 加载1s后调整loginDiv2的宽度，最多调整5次
	var id = window.setInterval(function(){
		var lastTime = $("#loginDiv").data("time");
		var currTime = (new Date()).getTime();
		var w1 = $("#loginDiv").width();
		var w2 = $("#loginDiv2").width();
		if (currTime - lastTime > 5000 && w1 == w2) {
			var id = $("#loginDiv").data('interval-id');
			window.clearInterval(id);
		}
		changeLoginDiv2();
		console.log('w1 = ' + w1 + ', w2 = ' + w2);
	},500);
	$("#loginDiv").attr('data-time', (new Date()).getTime());
	$("#loginDiv").attr('data-interval-id', id);
});
$("body").keydown( function(e) {
	    if(e.keyCode == "13"){
	       $("#loginBtn").click();
	    }
});

</script>
</html>